import React, { useEffect, useState, useContext } from 'react'
import Echarts from '&/baseUI/EChartsUI'
import dayjs from 'dayjs'
import { ActivityLevelContext } from '../context'
const Enterprise = () => {
  const { type, districtData } = useContext(ActivityLevelContext)
  const [option, setOption] = useState({})
  useEffect(() => {
    if (!districtData) return
    let format = type == 2 ? 'YYYY-MM-DD HH' + '时' : 'YYYY-MM-DD'
    let dataSeries = districtData.data.map((i) => {
      return {
        title: { text: dayjs(i.time).format(format), right: 100 },
        series: [
          { data: hendlerData(i.data_change_percentage) },
          { data: hendlerData(i.standard_value) }
        ]
      }
    })
    const option = {
      baseOption: {
        timeline: {
          bottom: 1,
          axisType: 'category',
          autoPlay: true,
          playInterval: 1000,
          data: districtData.time_list,
          label: {
            formatter: function (s) {
              return dayjs(s).format('YYYY-MM-DD')
            }
          }
        },
        tooltip: {},
        toolbox: {
          right: 100,
          top: 20,
          feature: {
            saveAsImage: {
              type: 'png',
              title: '保存为图片',
              name: '各区逐日用电量变化图表'
            }
          }
        },
        calculable: true,
        grid: {
          bottom: 100,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true,
                formatter: function (params) {
                  return params.value.replace('\n', '')
                }
              }
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: { rotate: 60 },
            data: districtData.data[0].county_name,
            splitLine: { show: false }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '千瓦时'
          }
        ],
        series: [
          { name: '日变化率', type: 'bar' },
          { name: '基准值', type: 'bar' }
        ]
      },
      options: dataSeries
    }
    setOption(option)
  }, [districtData])

  const hendlerData = (arr) => {
    let data = arr.map((i) => {
      if (i == -99 || i == -98) {
        i = '--'
      }
      return i
    })
    return data
  }

  return (
    <div className="Enterprise">
      <Echarts option={option} />
    </div>
  )
}

export default Enterprise
